$(function () {
    // 新闻列表
    let $newNavLi = $('#artile li');   // 标签li
    let iPage = 1;                          // 默认第一页
    let iTotalPage = 1;                     // 默认总页数为1
    let iCurrentTagId = 0;                  // 默认分类标签为0
    let bIsLoadData = true;                 // 是否正在向后台加载数据
    let $read_more=$('.read-more')          //阅读全文
    fn_load_content();

    // 点击分类标签
    $newNavLi.click(function () {
        // 点击分类标签，则为点击的标签加上一个active的class属性
        // 并移除其他兄弟元素上的active的class属性
        $(this).addClass('active').siblings('li').removeClass('active');
        // 获取绑定在data-id属性上的tag_id
        let iClickTagId = $(this).children('a').attr('data-id');
        if (iClickTagId !== iCurrentTagId){
            iCurrentTagId = iClickTagId;  // 记录当前分类id
            // 重置分页参数
            iPage = 1;
            iTotalPage = 1;
            fn_load_content()
        }

    });

    // 页面滚动加载
    $(window).scroll(function () {
       // 浏览器窗口高度
        let showHeigtht = $(window).height();
       // 整个网页高度
        let pageHeight = $(document).height();
        //页面可以滚动的距离
        let canScrollHeight = pageHeight - showHeigtht;
        // 页面滚动了多少， 整个是随着页面滚动实时变化的
        let nowScroll = $(document).scrollTop();
        if ((canScrollHeight - nowScroll) < 100){
            if(!bIsLoadData){
                bIsLoadData = true;
                //判断页数，去更新新闻，小于总数才加载
                if(iPage < iTotalPage){
                    iPage += 1;
                    fn_load_content();

                }else {
                    message.showInfo('已全部加载，没有更多内容！');
                    $('.Pagination >a.btn-more').html('已全部加载，没有更多内容！')
                }

            }
        }
    });

    // 向后端获取新闻列表数据
    function fn_load_content() {
        $.ajax({
            url: '/article/new/',
            type: 'GET',
            data:{
                tag: iCurrentTagId,
                page: iPage
            },
            dataType: 'json',
            success: function (res) {
                if(res.errno === '0'){
                    iTotalPage = res.data.total_pages;
                    if(iPage === 1){
                        // 第一页清空内容
                        $('#main-content > ul').html('')
                    }



                    res.data.news.forEach(function (one_news) {
                        num=one_news.content.length/2
                        if(num>500)
                            num=500
                        stringObject=one_news.content
                        one_news.content=stringObject.substring(0, num)+"......"

                        let content = `
                         <li>
            \t<div class="post">
            \t\t<h1 class="title">${one_news.title}</h1>
                    <span class="facebook"><a href="#"></a></span>
                    <div class="meta">
                    \t<ul >
                        \t<li class="admin"><a href="#">${one_news.author}</a></li>
                            <li class="date">${one_news.update_time}</li>
                            <li class="category"><a href="#">${one_news.tag_name}</a></li>
                            <li class="comments"><a href="#">${one_news.reading}阅读量</a></li>
                        </ul>
                    </div><!--end meta-->

                    <span class="main-border"></span>

                    <img class="post-image" src=${'/media/'+one_news.articlephoto} alt="post image" height="214" width="609" />

                    <p>${one_news.content}</p>
                    <a class="read-more" href="/article/news/${one_news.id}" >阅读全文</a>
                    <div class="clear"></div>
  \t\t\t\t</div><!--END post-->
                </li>
                        `;
                        $('#main-content > ul').append(content);
                    });
                  // $('.news-list').append($('<a href="javascript:void(0);" class="btn-more">滚动加载更多</a>'));
                  //数据加载完毕，设置正在加载数据变量为false，表示当前没有加载数据
                  bIsLoadData = false;
                  $('.Pagination >a.btn-more').html('滚动加载更多')
                }else {
                    // 加载失败，打印错误信息
                    message.showError(res.errmsg)
                }
            },
            error: function () {
                message.showError('服务器超时，请重试！')
            }
        });
    }
    //点击事件
    
});